

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.jpg">
  <link rel="icon" type="image/png" href="/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="acqui~zhang">
  <meta name="keywords" content="">
  <title>循环温习 - acqui~zhang</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/vs2015.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
		
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>acqui-blog</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>


    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="循环温习">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      acqui~zhang
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-05-21 16:53" pubdate>
        2021年5月21日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      22 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      1
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">循环温习</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：7 分钟前
                
              </p>
            
            <div class="markdown-body">
              <h1 id="循环温习"><a href="#循环温习" class="headerlink" title="循环温习"></a>循环温习</h1><p><font color=#999AAA >打印换行*号、打印99乘法表以及水仙花数</font></p>
<p>@<a href="%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95">TOC</a></p>
</font>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p><font color=#999AAA >无事随便看了一下python3，看到循环这一块便想到之前学习js时的一些练习(打印换行*号、打印99乘法表以及水仙花数等)于是就重新写了一遍。代码不难，所以就直接贴</font></p>
<h1 id="一、js版"><a href="#一、js版" class="headerlink" title="一、js版"></a>一、js版</h1><figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs javascript"><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * *</span><br><span class="hljs-comment"> * **</span><br><span class="hljs-comment"> * ***</span><br><span class="hljs-comment"> * ****</span><br><span class="hljs-comment"> * *****</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-comment">// let str=&quot;&quot;;</span><br><span class="hljs-comment">// for(let i=0;i&lt;10;i++)&#123;</span><br><span class="hljs-comment">//     for(let j=0;j&lt;i+1;j++) str+=&#x27;* &#x27;;</span><br><span class="hljs-comment">//     str+=&#x27;\n&#x27;</span><br><span class="hljs-comment">// &#125;;</span><br><span class="hljs-comment">// console.log(str);</span><br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 1x1=1</span><br><span class="hljs-comment"> * 1x1=1 1x2=2;</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">let</span> str=<span class="hljs-string">&#x27;&#x27;</span>;<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">1</span>;i&lt;=<span class="hljs-number">9</span>;i++)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> j=<span class="hljs-number">1</span>;j&lt;i+<span class="hljs-number">1</span>;j++) str=str+ j+<span class="hljs-string">&#x27;x&#x27;</span>+i+<span class="hljs-string">&#x27;=&#x27;</span>+(i*j)+<span class="hljs-string">&#x27;\t&#x27;</span>;<br>    str+=<span class="hljs-string">&#x27;\n&#x27;</span>;<br>&#125;;<br><span class="hljs-built_in">console</span>.log(str);<br><br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 水仙花数</span><br><span class="hljs-comment"> * 定义：</span><br><span class="hljs-comment"> * 一个数  他的每一位数的总个数次幂等于他本身</span><br><span class="hljs-comment"> * 例如：</span><br><span class="hljs-comment"> * 153  1^3+5^3+3^3=153</span><br><span class="hljs-comment"> * 8208 8^4+2^4+0^4+8^4=8208;</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-comment">// for (let i = 100; i &lt; 10000000; i++)&#123;</span><br><span class="hljs-comment">//     const num=i+&#x27;&#x27;;</span><br><span class="hljs-comment">//     const numLength=num.length;</span><br><span class="hljs-comment">//     let sum=0;</span><br><span class="hljs-comment">//     for(let j=0;j&lt;numLength;j++)&#123;</span><br><span class="hljs-comment">//         // sum=sum+ Math.pow(num[j],numLength); //or</span><br><span class="hljs-comment">//         sum=sum+ (num[j]**numLength); </span><br><span class="hljs-comment">//     &#125;</span><br><span class="hljs-comment">//     if(sum==i) console.log(num);</span><br><span class="hljs-comment">// &#125;</span><br><br></code></pre></div></td></tr></table></figure>



<h1 id="二、python3版"><a href="#二、python3版" class="headerlink" title="二、python3版"></a>二、python3版</h1><figure class="highlight python"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs python"><br><br><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><span class="hljs-string">*</span><br><span class="hljs-string">**</span><br><span class="hljs-string">***</span><br><span class="hljs-string">****</span><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><span class="hljs-comment"># for i in range(10):</span><br><span class="hljs-comment">#     for j in range(i+1):</span><br><span class="hljs-comment">#         print(&#x27;*&#x27;,end=&quot; &quot;)</span><br><span class="hljs-comment">#     print();</span><br><br><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><span class="hljs-string">1x1=1</span><br><span class="hljs-string">1x2=2 2x2=4</span><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><br><span class="hljs-comment"># for i in range(1,10):</span><br><span class="hljs-comment">#     for j in range(1,i+1):</span><br><span class="hljs-comment">#         print(i,&#x27;x&#x27;,j,&#x27;=&#x27;,i*j,end=&quot;   &quot;)</span><br><span class="hljs-comment">#     print()</span><br><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><span class="hljs-string"> * 水仙花数</span><br><span class="hljs-string"> * 定义：</span><br><span class="hljs-string"> * 一个数  他的每一位数的总个数次幂等于他本身</span><br><span class="hljs-string"> * 例如：</span><br><span class="hljs-string"> * 153  1^3+5^3+3^3=153</span><br><span class="hljs-string"> * 8208 8^4+2^4+0^4+8^4=8208;</span><br><span class="hljs-string">&#x27;&#x27;&#x27;</span><br><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">100</span>,<span class="hljs-number">100000</span>):<br>    sums=<span class="hljs-number">0</span>;<br>    num=<span class="hljs-built_in">str</span>(i);<br>    numLength=<span class="hljs-built_in">len</span>(num);<br>    <span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(numLength):<br>        <span class="hljs-comment"># sums=sums+pow(int(num[j]),numLength); # or</span><br>        sums=sums+(<span class="hljs-built_in">int</span>(num[j])**numLength);<br>    <span class="hljs-keyword">if</span> sums==i:<br>        print(i);<br><br></code></pre></div></td></tr></table></figure>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B8%A9%E4%B9%A0/">温习</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/%E6%B0%B4%E4%BB%99%E8%8A%B1%E6%95%B0/">水仙花数</a>
                    
                      <a class="hover-with-bg" href="/tags/99%E4%B9%98%E6%B3%95%E8%A1%A8/">99乘法表</a>
                    
                      <a class="hover-with-bg" href="/tags/js%E5%AE%9E%E7%8E%B0%E6%B0%B4%E4%BB%99%E8%8A%B1%E6%95%B0/">js实现水仙花数</a>
                    
                      <a class="hover-with-bg" href="/tags/python%E5%AE%9E%E7%8E%B0%E6%B0%B4%E4%BB%99%E8%8A%B1%E6%95%B0/">python实现水仙花数</a>
                    
                      <a class="hover-with-bg" href="/tags/python%E5%AE%9E%E7%8E%B099%E4%B9%98%E6%B3%95%E8%A1%A8/">python实现99乘法表</a>
                    
                      <a class="hover-with-bg" href="/tags/js%E5%AE%9E%E7%8E%B099%E4%B9%98%E6%B3%95%E8%A1%A8/">js实现99乘法表</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/05/24/2021-05-24-js%E8%BF%88%E5%90%91python%E8%AF%AD%E6%B3%95%E4%B9%8B%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E9%80%8F%E8%BF%87js%E5%8E%BB%E5%AD%A6%E4%B9%A0python%EF%BC%881%EF%BC%89/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">迈向python语法之基础语法/透过js去学习python(1)</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/05/13/2021-05-13-uniapp-uni-id%E5%BE%AE%E4%BF%A1%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95/">
                        <span class="hidden-mobile">uniapp uni-id微信授权登录小记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "hVPhC5cdupG2fSEySXtIT1Ww-gzGzoHsz",
          app_key: "yxe7Et2rAPu8GIwz1IOauuW1",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> <i class="iconfont icon-love"></i> <a href="#" target="_blank" rel="nofollow noopener"><span>acqui</span></a> 
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>



<div bgcolor="#000000">
	<canvas id="knife" style="width: 98vw"></canvas>
</div>
<script type="text/javascript">
	var canvas = document.getElementById("knife");
	canvas.style.position = "absolute";
	canvas.style.top = 0;
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var cxt = canvas.getContext("2d");
	var list = [];
	var list2 = [];
	var g = 0.05;
	cxt.textAlign = "center";

	cxt.strokeStyle = "#FFF";
	cxt.fillStyle = "#FFF";
	cxt.font = "12px SimHei";

	function draw() {
		for (var i = 0; i < list.length; i++) {
			if (list[i].e == 0) {
				list[i].list.push({
					x: list[i].x,
					y: list[i].y
				});
			} else {
				if (list[i].list.length) {
					list[i].list.shift();
				} else {
					list2.push({
						x: list[i].x,
						y: list[i].y,
						sy: list[i].sy,
						sx: list[i].sx,
						a: 8
					});
					list.splice(i, 1);
					i--;
					continue;
				}
			}
			if (list[i].list.length > 12)
				list[i].list.shift();
			list[i].x += list[i].sx;
			list[i].y += list[i].sy;
			list[i].sy += g;
			if (list[i].sy > 1 + Math.random()) {
				list[i].e = 1;
			}
		}
		var x = canvas.width / 2 - 10,
			y = canvas.height - 70;
		cxt.clearRect(0, 0, canvas.width, canvas.height);
		cxt.beginPath();
		cxt.fillStyle = "#F00";
		cxt.fillRect(x, y, 20, 50);
		cxt.beginPath();
		cxt.fillStyle = "#a00";
		cxt.moveTo(x, y);
		cxt.quadraticCurveTo(x + 10, y + 8, x + 20, y);
		cxt.quadraticCurveTo(x + 10, y - 8, x, y);
		cxt.closePath();
		cxt.fill();
		cxt.beginPath();
		cxt.fillStyle = "#F00";
		cxt.moveTo(x, y + 50);
		cxt.quadraticCurveTo(x + 10, y + 6 + 50, x + 20, y + 50);
		cxt.closePath();
		cxt.fill();
		cxt.beginPath();
		cxt.fillStyle = "#FFF";
		cxt.fillText("福", x + 10, y + 30);
		for (var i = 0; i < list.length; i++) {
			cxt.beginPath();
			for (var j = 0; j < list[i].list.length; j++) {
				if (j == 0)
					cxt.moveTo(list[i].list[j].x, list[i].list[j].y);
				else
					cxt.lineTo(list[i].list[j].x, list[i].list[j].y);
			}
			cxt.strokeStyle = list[i].c;
			cxt.stroke();
		}
		for (var i = 0; i < list2.length; i++) {
			cxt.beginPath();
			cxt.fillStyle = "rgba(255,255,255," + 0.1 * list2[i].a + ")";
			cxt.arc(list2[i].x, list2[i].y, 8 - list2[i].a, 0, Math.PI * 2);
			cxt.fill();
			list2[i].a -= 1;
			if (list2[i].a <= 0) {
				list2.splice(i, 1);
				i--;
			}
		}
	}

	function addFire() {
		for (var i = 0; i < 2; i++) {
			var p = {
				x: canvas.width / 2,
				y: canvas.height - 70,
				sx: Math.random() - 0.5,
				sy: -(Math.random() + 5),
				c: "rgba(255," + Math.round(Math.random() * 155 + 100) + "," + Math.round(Math.random() * 155 + 100) + ",1)",
				e: 0,
				list: []
			}
			list.push(p);
		}
	}

	function step() {
		addFire();
		draw();
		requestAnimationFrame(step);
	}
	requestAnimationFrame(step);
</script>
<!-- partial('my-plugin/lantern-6.html')-->
<!-- 浮动的猫 -->
<style scoped>
  #cat_down{
    position: fixed;
    top: 0px;
    left: .9375rem;
  }

  .all-wrap {
    -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  }

  .all {
    top: 10rem;
    left: calc(20% - 2.5rem);
    position: absolute;
    width: 5rem;
    height: 5rem;
    -webkit-transform-origin: center -20rem;
    transform-origin: center -20rem;
    -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  }

  .all:before {
    height: 20rem;
    width: 2px;
    background-color: #DB242A;
    left: calc(20% - 1px);
    bottom: 20rem;
    top: 20px;
  }

  .yarn {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22);
    background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22);
    z-index: 1;
  }

  .yarn:before,
  .yarn:after {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: -1px;
  }

  .yarn:before {
    left: calc(50% + 7px);
    background-color: #b1bce6;
  }

  .yarn:after {
    right: calc(50% + 7px);
    background-color: #D5E8F8;
  }

  .cat-wrap {
    position: absolute;
    top: 0;
    left: calc(50% - 45px);
    width: 90px;
    height: 130px;
    -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }

  .cat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: swing 7s 0.2s infinite both;
    animation: swing 7s 0.2s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }

  .cat-upper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    z-index: 1;
  }

  .cat-upper .cat-leg {
    position: absolute;
    width: 20px;
    height: 100%;
    background-color: white;
    z-index: -1;
    background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9);
    background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9);
  }

  .cat-upper .cat-leg:nth-child(1) {
    border-top-left-radius: 100px;
    left: 10px;
  }

  .cat-upper .cat-leg:nth-child(1):after {
    left: 50%;
  }

  .cat-upper .cat-leg:nth-child(2) {
    border-top-left-radius: 0;
    border-top-right-radius: 100px;
    right: 10px;
  }

  .cat-upper .cat-leg:nth-child(2):after {
    right: 50%;
  }

  .cat-lower-wrap {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 100%;
    width: 75px;
    left: calc(50% - 37.5px);
    -webkit-animation: reverse-swing 7s 0.2s infinite both;
    animation: reverse-swing 7s 0.2s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }

  .cat-lower {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: swing 7s 0.5s infinite both;
    animation: swing 7s 0.5s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }

  .cat-lower:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    z-index: 1;
  }

  .cat-lower .cat-leg,
  .cat-lower .cat-paw {
    z-index: -1;
    position: absolute;
    height: 20px;
    width: 20px;
    -webkit-animation: swing-leg 7s 0.3s infinite both;
    animation: swing-leg 7s 0.3s infinite both;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
  }

  .cat-lower>.cat-leg {
    bottom: 20px;
  }

  .cat-lower>.cat-leg .cat-leg {
    top: 25%;
  }

  .cat-lower>.cat-leg+.cat-leg {
    right: 0;
  }

  .cat-lower .cat-paw {
    top: 50%;
    border-radius: 50%;
    background-color: #fff;
  }

  .cat-lower .cat-tail {
    position: absolute;
    height: 15px;
    width: 10px;
    -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    z-index: 0;
    background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .cat-lower .cat-tail>.cat-tail {
    top: 50%;
  }

  .cat-lower>.cat-tail {
    left: calc(50% - 5px);
    top: 95%;
  }

  .cat-head {
    width: 90px;
    height: 90px;
    background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    border-radius: 50%;
    top: calc(100% - 45px);
  }

  .cat-face {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 100px;
    perspective: 100px;
  }

  .cat-ears {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    z-index: -1;
  }

  .cat-ear {
    width: 20px;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    top: -10px;
  }

  .cat-ear:first-child {
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewY(40deg);
    transform: skewY(40deg);
    background-color: white;
  }

  .cat-ear:first-child:before {
    left: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: #D7EBFB;
  }

  .cat-ear:last-child {
    right: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: skewY(-40deg);
    transform: skewY(-40deg);
    background-color: #d1e6f7;
  }

  .cat-ear:last-child:before {
    right: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #e0f0fc;
  }

  .cat-ear:before {
    width: 60%;
    height: 100%;
    top: 10px;
    position: absolute;
    background-color: #fff;
  }

  .cat-eyes {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 6px;
    -webkit-animation: blink 7s step-end infinite both;
    animation: blink 7s step-end infinite both;
  }

  .cat-eyes:before,
  .cat-eyes:after {
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #4B4D75;
  }

  .cat-eyes:before {
    left: 20px;
  }

  .cat-eyes:after {
    right: 20px;
  }

  .cat-mouth {
    position: absolute;
    width: 12px;
    height: 8px;
    background-color: #4B4D75;
    top: 60%;
    left: calc(50% - 6px);
    border-top-left-radius: 50% 30%;
    border-top-right-radius: 50% 30%;
    border-bottom-left-radius: 50% 70%;
    border-bottom-right-radius: 50% 70%;
    -webkit-transform: translateZ(10px);
    transform: translateZ(10px);
  }

  .cat-mouth:before,
  .cat-mouth:after {
    position: absolute;
    width: 90%;
    height: 100%;
    border: 2px solid #9FA2CB;
    top: 80%;
    border-radius: 100px;
    border-top-color: transparent;
    z-index: -1;
  }

  .cat-mouth:before {
    border-left-color: transparent;
    right: calc(50% - 1px);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  .cat-mouth:after {
    border-right-color: transparent;
    left: calc(50% - 1px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  .cat-whiskers {
    width: 50%;
    height: 8px;
    position: absolute;
    bottom: 25%;
    left: 25%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 60px;
    perspective: 60px;
  }

  .cat-whiskers:before,
  .cat-whiskers:after {
    position: absolute;
    height: 100%;
    width: 30%;
    border: 2px solid #9FA2CB;
    border-left: none;
    border-right: none;
  }

  .cat-whiskers:before {
    right: 100%;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotateY(70deg) rotateZ(-10deg);
    transform: rotateY(70deg) rotateZ(-10deg);
  }

  .cat-whiskers:after {
    left: 100%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotateY(-70deg) rotateZ(10deg);
    transform: rotateY(-70deg) rotateZ(10deg);
  }

  @-webkit-keyframes bob {
    0% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    6.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    12.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    18.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    25% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    31.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    37.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    43.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    50% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    56.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    62.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    68.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    75% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    81.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    87.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    93.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    100% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  }

  @keyframes bob {
    0% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    6.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    12.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    18.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    25% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    31.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    37.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    43.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    50% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    56.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    62.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    68.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    75% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    81.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    87.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }

    93.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }

    100% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  }

  @-webkit-keyframes swing {
    0% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }

    12.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    25% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    37.5% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }

    50% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }

    62.5% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }

    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    87.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    100% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  }

  @keyframes swing {
    0% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }

    12.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    25% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    37.5% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }

    50% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }

    62.5% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }

    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    87.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    100% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  }

  @-webkit-keyframes swing-leg {
    0% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }

    12.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }

    25% {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }

    37.5% {
      -webkit-transform: rotate(-1.5deg);
      transform: rotate(-1.5deg);
    }

    50% {
      -webkit-transform: rotate(2.3deg);
      transform: rotate(2.3deg);
    }

    62.5% {
      -webkit-transform: rotate(-2.3deg);
      transform: rotate(-2.3deg);
    }

    75% {
      -webkit-transform: rotate(1.5deg);
      transform: rotate(1.5deg);
    }

    87.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }

    100% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  }

  @keyframes swing-leg {
    0% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }

    12.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }

    25% {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }

    37.5% {
      -webkit-transform: rotate(-1.5deg);
      transform: rotate(-1.5deg);
    }

    50% {
      -webkit-transform: rotate(2.3deg);
      transform: rotate(2.3deg);
    }

    62.5% {
      -webkit-transform: rotate(-2.3deg);
      transform: rotate(-2.3deg);
    }

    75% {
      -webkit-transform: rotate(1.5deg);
      transform: rotate(1.5deg);
    }

    87.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }

    100% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  }

  @-webkit-keyframes swing-tail {
    0% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }

    12.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }

    25% {
      -webkit-transform: rotate(-4deg);
      transform: rotate(-4deg);
    }

    37.5% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }

    50% {
      -webkit-transform: rotate(-9.2deg);
      transform: rotate(-9.2deg);
    }

    62.5% {
      -webkit-transform: rotate(9.2deg);
      transform: rotate(9.2deg);
    }

    75% {
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }

    87.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }

    100% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  }

  @keyframes swing-tail {
    0% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }

    12.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }

    25% {
      -webkit-transform: rotate(-4deg);
      transform: rotate(-4deg);
    }

    37.5% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }

    50% {
      -webkit-transform: rotate(-9.2deg);
      transform: rotate(-9.2deg);
    }

    62.5% {
      -webkit-transform: rotate(9.2deg);
      transform: rotate(9.2deg);
    }

    75% {
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }

    87.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }

    100% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  }

  @-webkit-keyframes reverse-swing {
    0% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }

    12.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    25% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    37.5% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    50% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }

    62.5% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }

    75% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }

    87.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    100% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  }

  @keyframes reverse-swing {
    0% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }

    12.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    25% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    37.5% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    50% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }

    62.5% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }

    75% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }

    87.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    100% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  }

  @-webkit-keyframes face {
    0% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }

    12.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }

    25% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }

    37.5% {
      -webkit-transform: translateX(7.5px);
      transform: translateX(7.5px);
    }

    50% {
      -webkit-transform: translateX(-11.5px);
      transform: translateX(-11.5px);
    }

    62.5% {
      -webkit-transform: translateX(11.5px);
      transform: translateX(11.5px);
    }

    75% {
      -webkit-transform: translateX(-7.5px);
      transform: translateX(-7.5px);
    }

    87.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }

    100% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  }

  @keyframes face {
    0% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }

    12.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }

    25% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }

    37.5% {
      -webkit-transform: translateX(7.5px);
      transform: translateX(7.5px);
    }

    50% {
      -webkit-transform: translateX(-11.5px);
      transform: translateX(-11.5px);
    }

    62.5% {
      -webkit-transform: translateX(11.5px);
      transform: translateX(11.5px);
    }

    75% {
      -webkit-transform: translateX(-7.5px);
      transform: translateX(-7.5px);
    }

    87.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }

    100% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  }

  @-webkit-keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes blink {

    from,
    to,
    10%,
    25%,
    80% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }

    8%,
    23%,
    78% {
      -webkit-transform: scaleY(0.1);
      transform: scaleY(0.1);
    }
  }

  @keyframes blink {

    from,
    to,
    10%,
    25%,
    80% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }

    8%,
    23%,
    78% {
      -webkit-transform: scaleY(0.1);
      transform: scaleY(0.1);
    }
  }


  #cat_down *,
  #cat_down *:before,
  #cat_down *:after {
    box-sizing: border-box;
    position: absolute;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  #cat_down *:before,
  #cat_down *:after {
    content: '';
    display: block;
  }
</style>

<section id="cat_down">
  <div class="all-wrap">
    <div class="all">
      <div class="yarn"></div>
      <div class="cat-wrap">
        <div class="cat">
          <div class="cat-upper">
            <div class="cat-leg"></div>
            <div class="cat-leg"></div>
            <div class="cat-head">
              <div class="cat-ears">
                <div class="cat-ear"></div>
                <div class="cat-ear"></div>
              </div>
              <div class="cat-face">
                <div class="cat-eyes"></div>
                <div class="cat-mouth"></div>
                <div class="cat-whiskers"></div>
              </div>
            </div>
          </div>
          <div class="cat-lower-wrap">
            <div class="cat-lower">
              <div class="cat-leg">
                <div class="cat-leg">
                  <div class="cat-leg">
                    <div class="cat-leg">
                      <div class="cat-leg">
                        <div class="cat-leg">
                          <div class="cat-leg">
                            <div class="cat-leg">
                              <div class="cat-leg">
                                <div class="cat-leg">
                                  <div class="cat-leg">
                                    <div class="cat-leg">
                                      <div class="cat-leg">
                                        <div class="cat-leg">
                                          <div class="cat-leg">
                                            <div class="cat-leg">
                                              <div class="cat-paw"></div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cat-leg">
                <div class="cat-leg">
                  <div class="cat-leg">
                    <div class="cat-leg">
                      <div class="cat-leg">
                        <div class="cat-leg">
                          <div class="cat-leg">
                            <div class="cat-leg">
                              <div class="cat-leg">
                                <div class="cat-leg">
                                  <div class="cat-leg">
                                    <div class="cat-leg">
                                      <div class="cat-leg">
                                        <div class="cat-leg">
                                          <div class="cat-leg">
                                            <div class="cat-leg">
                                              <div class="cat-paw"></div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cat-tail">
                <div class="cat-tail">
                  <div class="cat-tail">
                    <div class="cat-tail">
                      <div class="cat-tail">
                        <div class="cat-tail">
                          <div class="cat-tail">
                            <div class="cat-tail">
                              <div class="cat-tail">
                                <div class="cat-tail">
                                  <div class="cat-tail">
                                    <div class="cat-tail">
                                      <div class="cat-tail">
                                        <div class="cat-tail">
                                          <div class="cat-tail">
                                            <div class="cat-tail -end"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>












	
			
			




<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


<div style="text-align: center;">
	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
</div>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("01/23/2021 10:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"superSample":2,"width":250,"height":500,"position":"right","hOffset":0,"vOffset":-20},"mobile":{"show":false,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.2},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
